<template>
  <div class="files">
    <a-row class="grid-demo" :gutter="24">
      <a-col :span="5">
        <div class="leftcar" :style="{'height':divheight/2-130+'px'}">
          <div class="leftcar_top">文件分布统计</div>
          <div id="main1" :style="{'height':divheight/2-200+'px','margin': '5px auto'}"></div>
        </div>
      </a-col>
      <a-col :span="14">
        <div class="cententcar" :style="{'height':divheight/2-130+'px'}">
          <div class="cententcar_top">文件上传月统计</div>
          <div id="main2" :style="{'height':divheight/2-200+'px','margin': '5px auto'}"></div>
        </div>
      </a-col>
      <a-col :span="5">
        <div class="leftcar" :style="{'height':divheight/2-130+'px'}">
          <div class="leftcar_top">文件上传记录</div>
          <div v-if="Historyfile.length<1">
            <f-empty/>
          </div>
          <div v-else :style="{'height':divheight/2-200+'px','margin': '5px auto'}"
               style="overflow-y: auto;overflow-x: hidden;padding: 10px;">
            <a-timeline>
              <a-timeline-item v-for="(item,index) in Historyfile" :key="index" :label="item.createtime">
                <p style="color: #505bd3;">文件名：{{ item.oldfilename }}</p>
                <p style="color: #505bd3;">文件大小：{{ item.filesize }}MB</p>
              </a-timeline-item>
            </a-timeline>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
// 例如：import  《组件名称》  from '《组件路径》 ';

import {GetFileInfo, GetHistory, GetMouthCount} from "@/api/BoardAPI";
import {onMounted, reactive, ref} from "vue";
import {errorMessage} from "@/hooks/useMessage";
import * as echarts from 'echarts';
import dayjs from "dayjs";
import {generateRandomNumber} from "@/hooks/useRandomNumber";
import FEmpty from "@/components/f-empty/f-empty.vue";

export default {
  name: "BoardCount",
  components: {FEmpty},
  setup() {
    let divheight = ref(window.innerHeight)// 窗口高度
    let Historyfile = reactive([])// 历史上传的文件
    // 左上角的统计图
    function ShowFileCount() {
      GetFileInfo()
          .then(data => {
            if (data) {
              let itemlist = []
              data.forEach(x => {
                itemlist.push({
                  value: x.filecount,
                  name: x.filetype
                })
              })
              let chartDom = document.getElementById('main1');
              let myChart = echarts.init(chartDom);
              let option = {
                tooltip: {
                  trigger: 'item'
                },
                legend: {
                  orient: 'vertical',
                  left: 'right',
                  height: 'auto',
                  textStyle: {
                    color: `rgb(${generateRandomNumber()}, ${generateRandomNumber()}, ${generateRandomNumber()})`,
                    fontSize: 14,
                    fontWeight: 'bold'
                  },
                },
                series: [
                  {
                    name: '文件统计数量',
                    type: 'pie',
                    radius: ['25%', '60%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                      borderRadius: 10,
                      borderColor: '#fff',
                      borderWidth: 2
                    },
                    label: {
                      show: true,
                      position: 'center'
                    },
                    emphasis: {
                      label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                      }
                    },
                    data: itemlist
                  }
                ],
              };
              option && myChart.setOption(option);
            }
          })
          .catch(err => {
            errorMessage("发生错误" + err)
          })
    }

    // 上方的统计图
    function ShowFileCount2() {
      GetMouthCount()
          .then(data => {
            if (data){
              let dataitem = []
              let datalist = []
              data.forEach(x => {
                datalist.push(x.createdata)
                dataitem.push(x.filecount)
              })
              let chartDom = document.getElementById('main2');
              chartDom.style.width = "100%";  //初始化echarts图表宽度
              let myChart = echarts.init(chartDom);
              let option = {
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'cross',
                    label: {
                      backgroundColor: `rgb(${generateRandomNumber()}, ${generateRandomNumber()}, ${generateRandomNumber()})`
                    }
                  }
                },
                xAxis: {
                  // x轴辅助线
                  splitLine: {
                    show: true,
                    lineStyle: {
                      color: ['#0f144b'],
                      width: 1,
                      type: 'solid',
                    },
                  },
                  type: 'category',
                  data: datalist,
                  // 更改x轴线的颜色
                  axisLine: {
                    show: true,
                    lineStyle: {
                      color: '#235ba6',
                      width: 1, //x轴线的宽度
                    }
                  },
                  // 坐标刻度线
                  axisTick: {
                    show: true,
                    lineStyle: {
                      type: 'solid', //y轴分割线类型
                      color: 'rgba(102,102,102,0.9)',
                      width: 2.5,
                    },
                  }
                },
                yAxis: [
                  {
                    // y轴辅助线
                    splitLine: {
                      show: true,
                      lineStyle: {
                        color: ['#0f144b'],
                        width: 1,
                        type: 'solid',
                      },
                    },
                    type: 'value',
                    name: '数量',
                    position: 'left',
                    alignTicks: true,
                    axisLine: {
                      show: true,
                      lineStyle: {
                        color: '#235ba6'
                      }
                    },
                    axisLabel: {
                      formatter: '{value}'
                    },
                  }
                ],
                series: [
                  {
                    data: dataitem,
                    type: 'bar',
                    itemStyle: {
                      normal: {
                        //这里是颜色
                        color: function (params) {
                          return '#655bef'
                        }
                      }
                    }
                  }
                ],
                grid: {
                  left: '3%',
                  right: '3%',
                  bottom: '2%',
                  containLabel: true
                }
              };
              option && myChart.setOption(option);
            }
          })
          .catch(err => {
            errorMessage("发生错误" + err)
          })
    }

    // 获取历史上传的文件记录
    function getfile() {
      GetHistory()
          .then(data => {
            if (data){
              data.forEach(x => {
                x.createtime = dayjs(x.createtime).format('YYYY年MM月DD日 HH:mm:ss')
                Historyfile.push(x)
              })
              Historyfile.push(...data)
            }
          })
          .catch(err => {
            errorMessage("发生错误" + err)
          })
    }

    onMounted(() => {
      ShowFileCount()
      ShowFileCount2()
      getfile()
    })
    return {
      divheight,
      Historyfile
    }
  }
}
</script>

<style scoped>
.files {
  padding: 10px;
}

.leftcar {
  border: 1px solid #151970;
  background: linear-gradient(to bottom, #505bd3 0px, #505bd3 1px, transparent 1px, transparent 100%) left top no-repeat,
  linear-gradient(to right, #505bd3 0px, #505bd3 1px, transparent 1px, transparent 100%) left top no-repeat,
  linear-gradient(to bottom, #505bd3 0px, #505bd3 1px, transparent 1px, transparent 100%) right top no-repeat,
  linear-gradient(to left, #505bd3 0px, #505bd3 1px, transparent 1px, transparent 100%) right top no-repeat,
  linear-gradient(to top, #505bd3 0px, #505bd3 1px, transparent 1px, transparent 100%) left bottom no-repeat,
  linear-gradient(to right, #505bd3 0px, #505bd3 1px, transparent 1px, transparent 100%) left bottom no-repeat,
  linear-gradient(to top, #505bd3 0px, #505bd3 1px, transparent 1px, transparent 100%) right bottom no-repeat,
  linear-gradient(to left, #505bd3 0px, #505bd3 1px, transparent 1px, transparent 100%) right bottom no-repeat;
  background-size: 2rem 2rem;
  padding: 2px;
}

.leftcar_top {
  height: 30px;
  line-height: 30px;
  color: #08b6de;
  width: 200px;
  font-weight: bolder;
  margin: 0 auto;
  background: #030e77;
  text-align: center;
  transform: perspective(10px) rotateX(-5deg);
  position: relative;
  border: 1px solid #1c2a9d;
}

.cententcar {
  border: 1px solid #151970;
  background: linear-gradient(to bottom, #505bd3 0px, #505bd3 1px, transparent 1px, transparent 100%) left top no-repeat,
  linear-gradient(to right, #505bd3 0px, #505bd3 1px, transparent 1px, transparent 100%) left top no-repeat,
  linear-gradient(to bottom, #505bd3 0px, #505bd3 1px, transparent 1px, transparent 100%) right top no-repeat,
  linear-gradient(to left, #505bd3 0px, #505bd3 1px, transparent 1px, transparent 100%) right top no-repeat,
  linear-gradient(to top, #505bd3 0px, #505bd3 1px, transparent 1px, transparent 100%) left bottom no-repeat,
  linear-gradient(to right, #505bd3 0px, #505bd3 1px, transparent 1px, transparent 100%) left bottom no-repeat,
  linear-gradient(to top, #505bd3 0px, #505bd3 1px, transparent 1px, transparent 100%) right bottom no-repeat,
  linear-gradient(to left, #505bd3 0px, #505bd3 1px, transparent 1px, transparent 100%) right bottom no-repeat;
  background-size: 2rem 2rem;
  padding: 2px;
}

.cententcar_top {
  height: 30px;
  line-height: 30px;
  color: #08b6de;
  width: 200px;
  font-weight: bolder;
  margin: 0 auto;
  background: #030e77;
  text-align: center;
  transform: perspective(10px) rotateX(-5deg);
  position: relative;
  border: 1px solid #1c2a9d;
}
</style>